<template>
    <div class="cmt-container">
        <h3>发表评论</h3>

        <hr>
        <textarea placeholder="请输入要发表的内容(最多120字)" v-model="msg"></textarea>

        <mt-button type="primary" size="large" @click="postComment">发表评论</mt-button>
        <div class="cmt-list">
            <div class="cmt-item" v-for="(item, i) in comments" :key="item.ass_time">
                <div class="cmt-title">
                    第{{ i+1 }}楼&nbsp;&nbsp;用户：{{item.user_nme}}&nbsp;&nbsp;发表时间: {{item.add_time | dataFormat}}
                </div>
                <div class="cmt-body">
                    {{ item.content === 'undefined' ? '此用户很懒，没有评论': item.content}}
                </div>
            </div>
       
            <div class="cmt-item">
                <div class="cmt-title">
                    第1楼&nbsp;&nbsp;用户：匿名用户&nbsp;&nbsp;发表时间: 2018-08-07
                </div>
                <div class="cmt-body">
                   1.首先说一下外观方面，很惊艳，从2013年开始用iphone一直到现在，感觉我们国产机发展真的速度惊人，很佩服，很骄傲，很多同学吐槽全面屏，可是当你使用的时候真的一点都不影响，习惯了看着还挺好看。 
2…说说系统，也是最让我开心的，米家的系统OK的，非常流畅，某些地方和苹果相似，不托尾，很跟手，手势操作非常棒，很便利，没有那底部的三个键看着真舒服，。
                </div>
            </div>
            <div class="cmt-item">
                <div class="cmt-title">
                    第2楼&nbsp;&nbsp;用户：匿名用户&nbsp;&nbsp;发表时间: 2018-08-07
                </div>
                <div class="cmt-body">
                    说说这次换手机的过程吧，去年在京东入了台二手6S-64G，一直到现在都没有问题，也用习惯了iOS系统的速度，但整天抱着充电宝走来走去也是一**烦事，有时还找不到充电的，现电池正常使用5-7小时左右，为此就想着换机，把6S卖了1500，再补点钱换台安卓机电又耐用点的，第一时间看中刚出的米8SE，京东下单到手用起来就拿刚卖掉的6**，速度怎都跟不上，用两天就退了，接着又看华为系列的荣耀10/v10/play，看网上对比评价选了荣耀10，回来用了一天，可能是隐藏指纹吧，解锁反应还是不如意，最终还是换了小米8，不过补差价就多了点，但物有所值，手机到手很好，速度杠杠的，以前用过红米2A，当时来说用到也没有问题。再说说就是给京东带来麻烦了，快递哥都认得到我了，换了两次机才满意。
                </div>
            </div>
        </div>
        <mt-button type="danger" size="large" plain @click="getmore">加载更多</mt-button>
    </div>
</template>

<script>
import { Toast } from "mint-ui"
export default{
    data() {
        return{
           pageindex : 1,
           comments: [],
           msg: ''
        }
    },
    created() {
        this.getComments()
    },
    methods: {
        getComments() {
            this.$http.get('api/getcomments/'+ this.id + '?pageindex=' + this.pageindex)
            .then(result => {
               if(result.body.status === 0){
                   //this.comments = result.body.message
                   this.comments = this.comments.concat(result.body.message)
               }else{
                   Toast('获取评论失败')
               } 
            })
        },
        getmore() {
            this.pageindex++;
            this.getComments()
        },
        postComment() {
            //校验
            if(this.msg.trim().length === 0){
                return Toast('评论不能为空')
            }
            this.$http.post('api/postcomment/' + this.$route.params.id,
            {content: this.msg.trim()} )
            .then(result => {
                if(result.body.status === 0){
                    var cmt = {user_name: '匿名用户', add_time: Date.now(), content: this.msg.trim()}
                }
                this.comments.unshift(cmt);
                this.msg =''
            })
        }
    },
    props: ['id']
}
</script>

<style lang="scss" scoped>
.cmt-container{
    h3{
        font-size: 18px;
    }
    textarea{
        font-size: 14px;
        height: 85px;
        margin: 0;
    }
    .cmt-list{
        margin: 5px 0;
        .cmt-item{
            font-size:  13px;
            .cmt-title{
                line-height: 30px;
                background-color: #ccc;
                
            }
            .cmt-body{
                text-indent: 2em;
               line-height: 35px;
            }
        }
    }
}
</style>

